<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function (){
         var btn1 = document.getElementById("btn1");
         var btn2 = document.getElementById("btn2");
         var box1 = document.getElementById("box1");

            /**
             * 点击btn1修改box1的宽高
             */
            btn1.onclick = function (){
                box1.style.width = "500px";
                box1.style.height = "500px";
                box1.style.backgroundColor = "blue";
            }

            /**
             * 读取样式
             * 注意：这种方式读取的是内联样式（就是直接在标签上使用style设置的样式）
             *      如果没有设置内联样式的话，那么读取的样式就为空字符串
             *    - 所以这里需要先点击btn1修改样式，再点击btn2读取样式
             */
            btn2.onclick = function (){
                console.log(box1.style.width)
            }

        }
    </script>
</head>
<body>
<button id="btn1">点我</button>
<button id="btn2">读取样式</button>

<div id="box1">

</div>
</body>

<style>
    #box1 {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

</html>
